<template>
  <div>
    <!-- 主要内容部分开始 -->
    <div class="content">
      <!-- 开头水波纹图片开始 -->
      <div class="rippleCon">
        <img src="../assets/fen/形状 3.png" alt />
      </div>
      <!-- 开头水波纹图片结束 -->

      <!-- 本页面包屑导航开始 -->
      <div class="crumbs currency">
        <!-- 包裹层开始 -->
        <div class="crubsPackage currency">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>行业动态</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 按钮包裹层开始 -->
          <div class="btnPackage">
            <el-button type="danger" round>平台咨询</el-button>
            <el-button type="danger" round>最新信息</el-button>
            <el-button type="danger" round>新闻头条</el-button>
          </div>
          <!-- 按钮包裹层结束 -->
        </div>
        <!-- 包裹层结束 -->
      </div>
      <!-- 本页面包屑导航结束 -->

      <!-- 分页内容/分页部分开始 -->
      <div class="pagingCon currency">
        <!-- 分页内容部分开始 -->
        <div class="content currency" v-for="(item, index) in dynamic" :key="index">
          <img :src="item.url" alt />
          <!-- 文字部分开始 -->
          <div class="word">
            <span>{{ item.title }}</span>
            <p>{{ item.content }}</p>
          </div>
          <!-- 文字部分结束 -->

          <!-- 跳转按钮开始 -->
          <a :href="'/details#/detailsBtn/' + index">
            <el-button icon="el-icon-arrow-right" circle></el-button>
          </a>
          <!-- 跳转按钮结束 -->
        </div>
        <!-- 分页内容部分结束 -->

        <!-- 分页部分开始 -->
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="dynamicNum"
            @current-change="handleCurrentChange"
            :page-size="6"
            :pager-count="5"
          ></el-pagination>
        </div>
        <!-- 分页部分结束 -->
      </div>
      <!-- 分页内容/分页部分结束 -->
    </div>
    <!-- 主要内容部分结束 -->
  </div>
</template>

<style scoped lang="less">
// 主要内容部分开始
.content {
  // 开头水波纹图片开始
  .rippleCon {
    width: 100%;
    height: 100px;
    position: relative;
    top: -1px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  // 开头水波纹图片结束

  // 本页面包屑导航开始
  .crumbs {
    height: 100px;
    margin-top: 20px;

    // 包裹层开始
    .crubsPackage {
      height: 90%;
      top: 5%;

      .el-breadcrumb {
        font-size: 17px;
      }

      //   按钮包裹层开始
      .btnPackage {
        width: 50%;
        height: 40px;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      //   按钮包裹层结束
    }
    // 包裹层结束
  }
  // 本页面包屑导航结束

  // 分页内容/分页部分开始
  .pagingCon {
    background-color: #f4f4f4;
    overflow: hidden;
    border-radius: 30px;
    padding-bottom: 100px;
    transition: all 1s;

    // 分页内容部分开始
    .content {
      height: 100px;
      background-color: white;
      border-radius: 50px;
      margin-top: 40px;
      transition: 0.5s all;

      &:hover {
        width: 90%;
        height: 110px;
        margin-left: -5%;
        // overflow: hidden;
      }

      &:hover img {
        border-radius: 100%;
      }

      &:hover .word > p {
        width: 100%;
      }

      img {
        height: 100px;
        width: 100px;
        border-radius: 15px;
        transition: 0.5s all;
      }

      //   文字部分开始
      .word {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;


        span {
          font-size: 20px;
          font-weight: 700;
        }

        p {
          display: inline-block;
          width: 80%;
          color: #cdcdcd;
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      //   文字部分结束

      // 跳转按钮开始
      .el-button {
        position: absolute;
        top: 50%;
        right: 1%;
        transform: translate(0, -50%);
      }
      // 跳转按钮结束
    }
    // 分页内容部分结束

    // 分页部分开始
    .block {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50%);
    }
    // 分页部分结束
  }
  // 分页内容/分页部分结束
}
// 主要内容部分结束
</style>

<script>
import img1 from '../assets/fen/timg (1).jpg';
import img2 from '../assets/fen/timg (2).jpg';
import img3 from '../assets/fen/timg (3).jpg';
import img4 from '../assets/fen/timg.jpg';
import img5 from '../assets/fen/u=3647128,1216299425&fm=26&gp=0.jpg';
import img6 from '../assets/fen/u=3467001896,2515933033&fm=26&gp=0.jpg';
import img7 from '../assets/fen/397f395dc36235c6564f7d3e90766e58.jpg';
import img8 from '../assets/fen/timg (4).jpg';
export default {
  data() {
    return {
      // 行业动态内容数据
      dynamicCon: [
        {
          title: "矿产业的一次重大改变，不知道的赶快了解一下。",
          url: img1,
          content:
            "严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企严格矿产资源利用排查监管。建立市国土、安监、林业环保等部门联合排查监管机制，每月一次深入矿山企",
        },
        {
          title: "为什么实习经历很重要哲理文章",
          url: img2,
          content:
            "现在实习经历好像越来越重要了，在迎接生网申的时候，不同的实习经历甚至在简历打分过程能得到不同的加分。可是，为什么毕业前要有实习？实习经历是不是真的很重要？所以今天专门来说说，为什么企业喜欢有实习经历的应届生。我做工厂招聘的时候，每年会在当地的大中专院校招聘一些在校生做实习生。而在招聘实习生的时候，我们和学生聊得最多的是他们除了学习以外还做过什么。所以这类学生会成为我们工厂招聘的首选。来分享一个让我印象很深的故事。",
        },
        {
          title: "浅说攀比浅说攀比浅说攀比浅说攀比",
          url: img3,
          content:
            "先来说个有关攀比的趣闻南美洲的原始森林中，有一种十分美丽的小鸟。它长着一身翠绿色的羽毛，羽毛中还夾有一圈圈波纹，因此人们就给它取了个翠波鸟的美称。翠波鸟大小才不过五、六厘米，可它的鸟巢却往往筑得硕大无比。同伴越多的地方，鸟巢就筑得越大，反之就要小得多。动物学家们经过长期的观察、对比、研究，终于揭开了其中的奥秘。原来翠波鸟筑大巢的目的并非是居住的需要，而是为了攀比。当附近有几只翠波鸟时，它们的筑巢竞赛就开始了。大家都不遗余力，拼命做大自己的鸟巢，不压倒对方决不罢休。结果终因过度操劳，体力严重透支，大巢落成之后不久便纷纷寿终正寝了。翠波鸟族群的这一悲剧就是因攀比而酿成的。作为万物之灵的人，其攀比之风也古已有之。最臭名昭著的当数西晋时的石崇与王恺了。",
        },
        {
          title: "乌龟得胜之后",
          url: img4,
          content:
            "在动物运动会上，代表爬行类参赛的乌龟凭借兔子的轻敌和骄傲在龟兔赛跑中得了冠军。一时间，消息不胫而走，乌龟声誉鹊起，圈粉无数。一向“门前冷落车马稀”的乌龟之家一下门庭若市、宾朋满座了、动物总局的领导亲自上门给乌龟颁发了重奖，勉励它再接再厉为“类”争光，并当场任命其为“爬行司龟鳖科副科长”。远亲近邻闻讯也纷纷带着厚礼前来贺喜看望，且在告别时都要说上一声：“苟富贵，毋相忘”。某日，八杆子也打不着的蜗牛带着一个大红包来到了乌龟家。几句寒喧之后，蜗牛直奔主题，开口就要跟乌龟拜师学艺。“乌科，你就收下我这个徒弟吧！我实在没脸活了。”蜗牛恳求着说。“怎么啦，你不是活得好好的吗？”乌龟一脸不解地望着蜗牛。",
        },
        {
          title: "余阿记‖不负苍生 无悔年华",
          url: img5,
          content:
            "张继磊是我的大学校友，现在是一名奋战在脱贫攻坚第一线的90后干部。和继磊认识纯属偶然，当初我们大学校友群里总共一百多人。由于我平日里有写作的爱好，经常也会在群里分享一些自己的文章，所以大家对我都比较熟。有一天和继磊互加好友，他很尊敬地称呼我为学长，这是因为我们学校在我的那一届是第一次在陕西招生，所以年龄比群里其他人都大。经过互相介绍，我才知道我的这位学弟只有28岁，一毕业就回到他们老家安康汉阴县。从事了一段时间教育工作后便主动请缨，下乡到一个偏远，名叫芹菜沟的山村里担任驻村第一书记，投身于脱贫攻坚工作。这个地方，正属于国家指定的秦巴山区集中连片深度贫困区，扶贫脱困的任务非常艰巨，而继磊在这个地方工作已经两年了。",
        },
        {
          title: "冯根林||茂香的姜汤",
          url: img6,
          content:
            "在之后的多次交谈中，聊的最多的就是他的工作。从摸底贫困户人数，为贫困户申请补助贷款，到建档立卡，为村民在山坡上培育经济作物，帮助无子女亲属的贫困户办理低保，整理各种扶贫资料等等，任务很繁重，每天的工作几乎跟打仗一样。时常会给我讲一些扶贫道路上的故事，酸甜苦辣的都有。尤其是刚来那会儿，由于年龄小，缺乏实际经验，工作曾一度无法展开，很受挫折，当然现在都已经轻车熟路了。有时候听他说起工作，感觉他不是在访贫入户，就是在访贫入户的路上，要么就是在田间地头忙活着。虽然一直未曾见面，但初步印象感觉继磊是一个很热情，有爱心又特别能吃苦的人。渐渐地我也有了想亲自去他那里实地看看的好奇和欲望。把这个想法告诉他时，他当即表示欢迎，并愿意带我到他们村子里外多看看",
        },
        {
          title: "今日五五——家乡的集市",
          url: img7,
          content:
           "今年八月份，我乘车前往继磊工作的地方。去之前说了我的几个原则。一是不影响他的正常工作，平时什么样子去后也一样。二是凡是可以公开的有关扶贫帮困的各种资料，希望我也可以翻阅。三是走访贫困户时我可以私下与他们交流。这些继磊也欣然同意，他明白我的用意，自然都心照不宣。",
        },
        {
          title: "公民与草民",
          url: img8,
          content:
            "大巴车从西安出发到汉阴县，穿越大秦岭山脉整整走了四个小时，到车站时继磊早已等候在那里。看到他的第一眼，还真有点吃惊，眼前这位年轻的学弟，戴着一副黑框眼镜，皮肤黑黝黝，一看就是长期户外风吹日晒的结果，讲着一口略带陕南口音的普通话，始终很热情随和。去村子时我们一路上谈笑风生。毕竟微信里聊了较长时间，彼此见面也没多少陌生感。当车行驶到山路上时，几乎变成螺旋式上升状态，青山绿树的风景倒也不错。路面虽已全部硬化但却比较窄，而且边上没有护栏。走到一边靠着山体，另一边就是几十米深的各种沟沟坎坎的地方，不免让人心生畏惧。尤其是路过一个较大的水库时，几乎把人能吓出心脏病。不用说，光看交通状况就明白这里的贫困程度有多深。",
        },
      ],
    //   行业动态数据个数
      dynamicNum: '',
      // 行业动态内容显示数据
      dynamic: [],
    };
  },
  created() {
      this.handleCurrentChange(1)
  },
  methods: {
    //   监听页数
    handleCurrentChange(Current) {
        let Con = []
        let j = 0
      for(let i = 6 * (Current-1); i < 6 * Current; i++){
          if(this.dynamicCon[i] != undefined) {
              Con[j] = this.dynamicCon[i]
          j++
          }
      }
      this.dynamic = Con
      this.dynamicNum = this.dynamicCon.length
    },
    // // 监听每页个数
    // handleSizeChange(Size) {
    //     console.log(Size)
    // }
  },
};
</script>